<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9" /> <!-- req for IE 9 else audio tag won't work -->
	<title>SoundJS: Convolution Example</title>

	<script type="text/javascript" src="./assets/preloadjs-0.2.0.min.js"></script>

	<script type="text/javascript" src="../src/soundjs/SoundJS.js"></script>
	<script type="text/javascript" src="../src/soundjs/HTMLAudioPlugin.js"></script>
	<script type="text/javascript" src="../src/swfobject.js"></script>
	<script type="text/javascript" src="../src/soundjs/FlashPlugin.js"></script>

	<!-- We also provide hosted minified versions of all CreateJS libraries.
	    http://code.createjs.com -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" >

	var preload;

	function init() {
		if (window.top != window) {
			document.getElementById("header").style.display = "none";
		}

		createjs.FlashPlugin.BASE_PATH = "../src/soundjs/" // Initialize the base path from this document to the Flash Plugin
		if (!createjs.SoundJS.checkPlugin(true)) {
			document.getElementById("error").style.display = "block";
			document.getElementById("content").style.display = "none";
			return;
		}

		document.getElementById("loader").className = "loader";
		// Preload a set of sounds.
		var assetPath = "assets/";
		var manifest = [
			{id:"dong", src:assetPath+"ToneWobble.mp3|"+assetPath+"ToneWobble.ogg", data:3},
			{id:"rat", src:assetPath+"R-Damage.mp3|"+assetPath+"R-Damage.ogg", data:2},
			{id:"gull", src:assetPath+"S-Damage.mp3|"+assetPath+"S-Damage.ogg", data:1}
		];


		preload = new createjs.PreloadJS();
		preload.onComplete = handleLoadComplete;
		preload.installPlugin(createjs.SoundJS);
		preload.loadManifest(manifest);
	}

	function stop() {
		if (preload != null) { preload.close(); }
		createjs.SoundJS.stop();
	}

	function handleLoadComplete() {
		document.getElementById("loader").className = "";
		// Enable the UI
		$("#demoStarter").attr("disabled", false);
	}

	var instance; // Controllable instance
	function begin(){

		//  In this demo, we play sounds at specific times, and show
		//  that the rules follow the instructions laid out.
		// Please report issues to create@createjs.com

		// Disable and reset the UI
		$("#demoStarter").attr("disabled", true);
		$("#p11").removeClass("active"); // Reset UI

		// Play "dong" immediately
		instance = createjs.SoundJS.play("dong", createjs.SoundJS.INTERRUPT_NONE, 0, 400, -1);
		$("#p01").addClass("active");

		// Play "gull" immediately
		createjs.SoundJS.play("gull", createjs.SoundJS.INTERRUPT_NONE);
		$("#p00").addClass("active");

		// Play "gull" after 150 ms. Interrupts first gull sound
		createjs.SoundJS.play("gull", createjs.SoundJS.INTERRUPT_ANY, 150);
		setTimeout(function(){
			$("#p00").removeClass("active")
			$("#p01").removeClass("active")
			$("#p02").addClass("active");
		}, 150);

		// Play "rat" after 1 second
		createjs.SoundJS.play("rat", createjs.SoundJS.INTERRUPT_NONE, 1000);
		setTimeout(function(){
			$("#p02").removeClass("active")
			$("#p03").addClass("active");
		}, 1000);

		// Play "rat" immediately after previous. Interrupts previous rat sound.
		setTimeout(function(){
			$("#p03").removeClass("active")
			createjs.SoundJS.play("rat", createjs.SoundJS.INTERRUPT_ANY);
			$("#p04").addClass("active");
		}, 1050);

		// Play "dong" after another second. Should start a new channel.
		setTimeout(function(){
			$("#p04").removeClass("active")
			createjs.SoundJS.play("dong", createjs.SoundJS.INTERRUPT_NONE, 0, 1000);
			$("#p05").addClass("active");
		}, 2500);

		// Play "dong" after another second. Should start a new channel.
		setTimeout(function(){
			$("#p05").removeClass("active")
			createjs.SoundJS.play("dong", createjs.SoundJS.INTERRUPT_NONE, 0, 1000);
			$("#p06").addClass("active");
		}, 3500);

		// Wait half a second, then pause all "dong" sounds.
		setTimeout(function(){
			$("#p06").removeClass("active")
			createjs.SoundJS.pause("dong");
			$("#p07").addClass("active");
		}, 4000);

		// Play another "dong" sound. instances are used up, so it should fail.
		setTimeout(function(){
			$("#p07").removeClass("active")
			createjs.SoundJS.play("dong", createjs.SoundJS.INTERRUPT_NONE, 0, 1000);
			$("#p08").addClass("active");
		}, 4500);

		// Wait 3 seconds, then resume all paused sounds.
		setTimeout(function(){
			$("#p08").removeClass("active")
			createjs.SoundJS.resume();
			$("#p09").addClass("active");
		}, 8000);

		// Wait another second, and play "dong" sound. Previous instance should be complete, so it will work.
		setTimeout(function(){
			$("#p09").removeClass("active")
			createjs.SoundJS.play("dong", createjs.SoundJS.INTERRUPT_NONE, 0, 1000);
			$("#p10").addClass("active");
		}, 9000);

		// Wait one second, and stop specific "dong" sounds.
		setTimeout(function(){
			$("#p10").removeClass("active")
			instance.stop();
			$("#p11").addClass("active");
		}, 10000);

		setTimeout(function(){
			$("#demoStarter").attr("disabled", false);
		}, 11000);
	}
</script>

	<link rel="stylesheet" type="text/css" href="assets/demoStyles.css"/>
	<style>
		p {
			padding: 10px;
		}
		p.item {
			border-bottom: 1px solid #EEE;
			padding: 5px;
			margin: 0;
		}
		p.item SPAN {
			font-weight: bold;
			color: #333;
		}
		p.active {
			font-weight:bold;
			background-color: #fca;
			border-width: 1 0 1 0;
			border: 1px solid #ccc;
		}
	</style>
</head>

<body align="center" onLoad="init()">

	<div id="loader"></div>

	<header id="header" class="SoundJS">
	    <h1><span class="text-product">Sound<strong>JS</strong></span> Convolution</h1>
		<p>Click "Run Demo" to see how SoundJS handles a variety of common sound playing situations.</p>
	</header>

	<div id="content" class="content">
		<input id="demoStarter" type="button" onclick="begin()" value="Run Demo" />
		<p id="p00" class="item"><span>0ms</span> - Quiet note, repeating</p>
		<p id="p01" class="item"><span>0ms</span> - Gull</p>
		<p id="p02" class="item"><span>150ms</span> - Gull interrupting previous gull</p>
		<p id="p03" class="item"><span>1000ms</span> - Rat</p>
		<p id="p04" class="item"><span>1050ms</span> - Rat overlapping prev rat</p>
		<p id="p05" class="item"><span>2500ms</span> - Note single</p>
		<p id="p06" class="item"><span>3500ms</span> - Note single overlapping</p>
		<p id="p07" class="item"><span>4000ms</span> - Pause mid notes</p>
		<p id="p08" class="item"><span>4500ms</span> - Note, (fails: instances used up)</p>
		<p id="p09" class="item"><span>8000ms</span> - Resume</p>
		<p id="p10" class="item"><span>9000ms</span> - Note single</p>
		<p id="p11" class="item"><span>10000ms</span> - Stop repeating note, letting previous note fade out</p>
	</div>

	<div id="error">
		<h1>Sorry!</h1>
		<p>SoundJS is not currently supported in your browser.</p>
		<p>We are currently working on support for iOS. Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
			if you see this in any other browsers.</p>
	</div>

</body>
</html>